<template>
  <div class="cp-area-list" @click="showList">
     <span>
      {{area}}
     </span>
    <i class="fa fa-sort-down"></i>
    <ul class="cp-area-ul" @click.stop="close" v-show="show">
      <li v-for="(a,i) in areaList" @click="selected(a,$event.currentTarget)">
        {{a.name}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "cp-area-list",
    data() {
      return {
        show: false,
        selectArea: {},
        area:""
      }
    },
    props: {
      areaList: {
        type: Array,
        default: []
      }
    },
    methods: {
      showList() {
        this.show = !this.show;
      },
      close() {
        this.show = false;
      },
      selected(data, obj) {
        this.area = data.name.substring(0,2)
      }
    },
    computed: {

    },
    mounted:function () {
      this.area = this.areaList[0].name.substring(0,2)
    },
    ready() {
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) this.show = false
      })
    }
  }
</script>
<style scoped>
  .cp-area-list span {
    line-height: 1.1rem;
    text-align: center;
  }

  .cp-area-list div {
    font-size: 0.90em;
  }

  .cp-area-ul {
    position: absolute;
    right: 0;
    box-shadow: 0 2px 10px rgba(41, 41, 41, .08);
  }

  .cp-area-ul li {
    line-height: 0.9rem;
    background-color: #fff;
    color: #333;
    width: 6em;
    font-size: 0.9em;
    border-top: 1px #ebebeb solid;
  }

  .cp-area-list i {
    font-size: 1.3em;
  }
</style>
